<template>
    <div class="flex flex-col h-full">
        <TitleBar class="absolute top-0 left-0 w-[450px]">今日进入数量</TitleBar>
        <div class="enter_num flex flex-col h-full">
            <div id="echarts_enterNmu" class="flex-1" style="height:100%"></div>
            <div class="enter_statistics">
                <div class="owner">
                    <div class="left">
                        <div class="owner_blcok"></div>
                        <div class="oener_num">业主&nbsp;&nbsp; (85%)</div>
                    </div>
                    <div class="owner_right">1150</div>
                </div>
                <div class="visitor">
                    <div class="left">
                        <div class="visitor_blcok"></div>
                        <div class="visitor_num">访客&nbsp;&nbsp; (15%)</div>
                    </div>
                    <div class="vistor_right">153</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import { debounce } from 'lodash';
import{gatewayRateStatistics} from './api.js'
import TitleBar from '../components/TitleBar.vue'
export default defineComponent({
    components: {TitleBar},
    inject: ['villageId'],
    data(){
        return{
            myCharts:'',
            charts_options: {},
            data1:[
                { value: 5, name: '高清' },
                { value: 10, name: '标清' }
            ]
        }
    },
    mounted(){
        this.initChart1()
    },
    destroyed(){
    },
    methods:{
       initChart1(){
            let dom = document.getElementById("echarts_enterNmu");
            this.myCharts = echarts.init(dom);
            this.setLineChart(this.myCharts);
        }, 
        setLineChart(myCharts){
            myCharts.clear();
            this.charts_options = {
                textStyle: {
                    rich: {
                    orgname: {
                        fontSize: 12,
                        width: 50,
                    },
                    count: {
                        fontSize: 12,
                        verticalAlign: 'top',
                        align: 'center',
                        color: '#fff',
                    },
                    },
                },
                title: {
                    show: true,
                    text: "222",
                    subtext: "进入总数",
                    textAlign: "center",
                    top: "20%",
                    left: "50%",
                    textStyle: {
                    fontSize: 20,
                    fontWeight: "400",
                    color: "#E1F7FF",
                    fontFamily: 'number',

                    },
                    subtextStyle: {
                    color: "#E1F7FF",
                    fontSize: 14,
                    },
                },
                tooltip: {
                    trigger: 'item',
                    show: false
                },
                color: ['#037aff', '#26e6e8', '#96e6ff'],
                legend: {
                    data: [],
                    orient: "vertical",
                    selectedMode: false,
                    bottom: '0%',
                    left: 'center',
                    icon: 'circle',
                    itemHeight: 13,
                    itemWidth: 13,
                    textStyle: { //图例字体大小
                    fontSize: 12,
                    color: "#fff"
                    },
                },

                series: [
                    {
                    name: '',
                    type: 'pie',
                    hoverAnimation: false,
                    radius: ['40%', '50%'],
                    center: ["50%", "35%"],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderWidth: 1
                    },
                    label: {
                        show: false,
                        position: 'center',
                        formatter: '{b}' + "\n" + '{c}',
                    },
                    emphasis: {//hover之后中间内容
                        label: {
                        show: false,
                        fontSize: '12',
                        lineHeight: 24,
                        color: "#fff",
                        formatter: '{num|{c}}' + "\n" + '{b}',
                        rich: {
                            num: {
                            fontSize: '20',
                            fontFamily: 'number',
                            }
                        }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: this.data1
                    }
                ]
            }
            myCharts.setOption(this.charts_options);
            const f = debounce(function () {
                if (myCharts.isDisposed()) {
                    window.removeEventListener('resize',f)
                } else {
                    myCharts.resize();
                }
            }, 500)
            window.addEventListener('resize', f)
            this.myCharts = myCharts;
        }
    }
})

</script>

<style scoped lang="scss">
.enter_num{
    display: flex;
    height: 80%;
    flex-direction: row;
    align-items: center;
    #echarts_enterNmu{
        flex: 1.5;
        align-items: center;
        height: 100%;
        width: 500px;
    }
    .enter_statistics{
        flex: 1.5;
        display: flex;
        flex-direction: column;
        .owner{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 15px;
            .left{
                flex: 1;
                display: flex;
                flex-direction: row;
                .owner_blcok{
                    width: 10px;
                    height: 10px;
                    background: #2CA6FF;
                    transform: translate(-20px, 4px)
                }
                .oener_num{
                    color: rgba(224, 247, 255, 0.8);
                    font-family: 'OPPOSans';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 18px;
                }
            }
            .owner_right{
                    flex: 1;
                    color:#E0F7FF ;
                    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);
                    font-family: 'OPPOSans';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 16px;
                    margin-right: -80px;
                }
        }
        .visitor{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .left{
                    flex: 1;
                    display: flex;
                    flex-direction: row;
                    .visitor_blcok{
                        width: 10px;
                        height: 10px;
                        background: #36C198;
                        transform: translate(-20px, 4px)
                    }
                    .visitor_num{
                        color: rgba(224, 247, 255, 0.8);
                        font-family: 'OPPOSans';
                        font-style: normal;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 18px;
                        
                        }
                }
                .vistor_right{
                    flex: 1;
                    color:#E0F7FF ;
                    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);
                    font-family: 'OPPOSans';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 16px;
                    margin-right: -80px;
                }
                
            }
    }
}
</style>